<template>
  <a-modal
    title="记录详情"
    :ok-button-props="{ style: okHidden && { display: 'none' } }"
    :width="680"
    :visible="visible"
    :confirmLoading="loading"
    :maskClosable="false"
    @ok="() => { $emit('ok') }"
    @cancel="() => { $emit('cancel') }"
  >
    <a-spin :spinning="loading" v-if="model">
      <a-form :form="form" v-bind="formLayout">
        <a-form-item v-if="model && model.id" label="主键ID" hidden>
          <a-input v-decorator="['id', { initialValue: model.id }]" disabled />
        </a-form-item>
        <a-form-item label="答题者">
          <div>{{ model.fullname }} {{ model.mobile }}</div>
        </a-form-item>
        <a-form-item label="所属村">
          <a-input :disabled="okHidden" v-decorator="['village_name', { initialValue: model.village_name}]" />
        </a-form-item>
        <a-form-item label="结果">
          <div style="display: flex;">
            <div>{{ model.right_num }} / {{ model.total_num }}</div>
          </div>
        </a-form-item>
        <a-form-item label="得分">
          <a-input :disabled="okHidden" v-decorator="['score', { initialValue: model.score + '（最终加分结果不超过结算上限）' }]" />
        </a-form-item>
        <a-form-item label="题目">
          <div v-for="(item, i) in JSON.parse(model.paper)" :key="item.id">
            <div style="display: flex; font-weight: 800;">{{ i + 1 }}、 {{ item.question_description }}</div>
            <div>
              <a-radio-group v-model="item.check_answer">
                <a-radio :style="radioStyle" :value="items.sort" v-for="(items, index) in item.question_option" :key="index">
                  <span :style="{ color: item.check_answer == item.right_answer && item.right_answer == items.sort ? 'green' : item.check_answer != item.right_answer && item.check_answer == items.sort ? 'red' : '' }">
                    {{ items.option }}
                  </span>
                </a-radio>
              </a-radio-group>
            </div>
            <div>
              <span :style="{ color: item.check_answer == item.right_answer ? 'green' : 'red' }" v-if="items.is_check" v-for="(items, index) in item.question_option" :key="index">
                {{ item.check_answer == item.right_answer ? '回答正确' : '回答错误'}}，
              </span>
              <span v-for="(itema, index) in item.question_option" :key="index">
                {{ itema.sort == item.right_answer ? '正确答案：' + itema.option : '' }}
              </span>
            </div>
          </div>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'
import Upload from '@/components/Upload/Upload'
import RichText from '@/components/RichText/RichText'
// 表单字段
const fields = ['fullname', 'score', 'paper', 'mobile', 'village_name', 'right_num', 'total_num', 'end_time', 'detailed_rules', 'times']

export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    loading: {
      type: Boolean,
      default: () => false
    },
    okHidden: {
      type: Boolean,
      default: () => false
    },
    model: {
      type: Object,
      default: () => null
    },
    classList: {
      type: Array,
      default: () => []
    }
  },
  data () {
    this.formLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 19 }
      }
    }
    return {
      form: this.$form.createForm(this),
      currentLength: 0,
      examStatus: '1',
      radioStyle: {
        display: 'block',
        height: '30px',
        lineHeight: '30px'
      },
      ruleContent: '',
      value: []
    }
  },
  watch: {
  },
  created () {
    // 防止表单未注册
    fields.forEach(v => this.form.getFieldDecorator(v))
    // console.log('数据', this.model)
    // 当 model 发生改变时，为表单设置值
    this.$watch('model', () => {
      this.$nextTick(() => {
        this.model && this.form.setFieldsValue(pick(this.model, fields))
      })
    })
  },
  methods: {
  },
  components: {
    Upload,
    RichText
  }
}
</script>

<style scoped>
  >>> .ant-upload.ant-upload-select-picture-card {
    margin-bottom: 0
  }
  >>> .clearfix {
    height: 110px
  }
  >>> .remove70 {
    margin-bottom: 110px !important;
    height: 300px !important;
  }
</style>
